<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的分享"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :listenScroll="true"
            :data="articalList"
            @pullup="loadMore"
            @scroll="scroll"
        >
            <div
                class="empty-tips"
                v-if="articalList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="artical-item"
                v-for="(items,indexs) of articalList"
                :key="indexs"
                @click="goArtical(items.mid)"
            >
                <div class="user-info-box">
                    <div class="user-img-box">
                        <img :src="items.face" />
                    </div>
                    <div class="user-info">
                        <div class="user-name">{{items.nick_name}}</div>
                        <div class="artical-date">{{items.add_time}}</div>
                    </div>
                    <div
                        class="delete"
                        @click.stop="deleteArtical(items.mid,indexs)"
                    >删除</div>
                </div>
                <div
                    class="artical-detail-box"
                    v-html="items.content"
                ></div>
                <div
                    class="artical-img-list"
                    v-if="items.imgs.length>0"
                >
                    <div
                        class="artical-img-item"
                        v-for="(item,index) of items.imgs.slice(0,3)"
                        :key="index"
                    >
                        <img :src="item.title_img" />
                    </div>
                </div>
            </div>
        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 分享想法 -->
        <div
            class="share-idea-box"
            v-show="showShareBtn"
            @click="goWrite"
        >
            <img
                class="share-idea-btn"
                src="@/assets/images/socialSystem/share-idea-btn.png"
            />
        </div>
        <!-- 分享想法 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'MyArtical',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.51rem',
                left: '0',
                right: '0',
                bottom: '0.4rem',
                padding: '0 .3rem'
            },
            articalList: [],
            scrollHistory: 0,
            showShareBtn: true,
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getMyArticalList()
    },
    methods: {
        scroll(data) {
            if (this.scrollHistory > data) {
                this.showShareBtn = false
            } else {
                this.showShareBtn = true
            }
            this.scrollHistory = data
        },
        getMyArticalList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                page: this.nowPage,
                page_size: 10
            })
            this.axios
                .post('/api/moments/get_user_list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        if (data.data.list.length == 0) {
                            this.emptyTips = '暂无数据'
                        }
                        this.articalList = this.articalList.concat(
                            data.data.list
                        )
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getMyArticalList()
            }
        },
        goArtical(id) {
            this.$router.push('/socialSystem/artical?id=' + id)
        },
        deleteArtical(id, index) {
            const that = this
            this.commonDialog.confirm(
                '提示',
                '是否确认删除本条分享？',
                function() {
                    let postData = that.qs.stringify({
                        id: id
                    })
                    that.axios
                        .post('/api/moments/delete.json', postData)
                        .then(res => {
                            const data = res.data
                            if (data.status == 1) {
                                that.commonDialog.alert(
                                    '提示',
                                    '分享删除成功！',
                                    function() {
                                        that.articalList.splice(index, 1)
                                        if (that.articalList.length == 0) {
                                            that.emptyTips = '暂无数据'
                                        }
                                    }
                                )
                            } else {
                                that.commonDialog.alert('提示', data.msg)
                            }
                        })
                }
            )
        },
        goWrite() {
            this.$router.push('/socialSystem/writeArtical')
        }
    }
}
</script>

<style lang="stylus" scoped>
.empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.artical-item
    background #fff
    border-radius 3px
    padding 0 0.3rem
    margin-bottom 0.4rem
    .user-info-box
        display flex
        align-items center
        height 1.41rem
        .user-img-box
            width 0.8rem
            height 0.8rem
            border-radius 100%
            overflow hidden
            img
                width 100%
                height 100%
        .user-info
            flex 1
            padding 0 0.3rem
            .user-name
                font-size 0.37rem
                color #333
                line-height 1
            .artical-date
                font-size 0.32rem
                color #888
                line-height 1
                margin-top 0.13rem
        .delete
            font-size 0.35rem
            color #d7463c
            line-height 1
    .artical-detail-box
        padding 0 0.37rem 0 0.37rem
        font-size 0.37rem
        color #333
        display -webkit-box
        -webkit-box-orient vertical
        overflow hidden
        -webkit-line-clamp 2
        word-break break-all
        line-height 0.5rem
        height 0.98rem
    .artical-img-list
        display flex
        justify-content flex-start
        padding 0.37rem
        .artical-img-item
            display flex
            align-items center
            justify-content center
            width 2.8rem
            height 2.8rem
            overflow hidden
            border-radius 5px
            background #000
            img
                width 100%
        .artical-img-item:nth-child(2)
            margin 0 0.16rem
.share-idea-box
    position absolute
    left 0
    right 0
    bottom 1rem
    display flex
    justify-content center
    .share-idea-btn
        height 1.05rem
</style>
